<template>
  <div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div style="padding-bottom:45px;">
    <div class="a" > 
      <!-- 卖家页面 -->
      <div class="b" v-if="detailList.refundState=='10' && detailList.refundType=='1' || detailList.refundState=='30' && detailList.refundType=='1' ">请处理退款申请</div>
      <div class="b" v-if="detailList.refundState=='10' && detailList.refundType=='2' || detailList.refundState=='30' && detailList.refundType=='2' " >请处理退货退款申请</div>
      <div class="b" v-if="detailList.refundState=='20' ">请等待买家处理</div>
      <div class="b" v-if="detailList.refundState=='40' ">等待买家寄回商品</div>
      <div class="b" v-if="detailList.refundState=='50' ">买家已发回物品，请您注意签收</div>
      <div style="display:flex;" v-if="detailList.refundState=='60'">
        <div style="margin-top:8px;">
           <img src="../../../../static/img/warn.png" alt="" style="width:13px;height:13px;"/>
        </div>
        <div class="b" v-if="detailList.refundState=='60'">您已确认收货，退款已退回买家账户。</div>
      </div>         
      <div class="b" v-if="detailList.refundState=='10' || detailList.refundState=='30'">
        <span >还剩</span><van-count-down :time="timeList.addTime*60*1000" format="DD 天 HH 时 mm 分" @finish="finish" />
      </div>
      <div class="b" v-if="detailList.refundState=='40' || detailList.refundState=='20'">
        <span >还剩</span><van-count-down :time="timeList.adminRemainingTime*60*1000" format="DD 天 HH 时 mm 分" @finish="finish" />
      </div>
      <div class="b" v-if="detailList.refundState=='50'">
        <span >还剩</span><van-count-down :time="timeList.expressRemainingTime*60*1000" format="DD 天 HH 时 mm 分" @finish="finish" />
      </div>
    </div>

    <div class="c">
      <div class="d" v-if="detailList.refundState=='10' && detailList.refundType=='1' || detailList.refundState=='30' && detailList.refundType=='1' || detailList.refundState=='10' && detailList.refundType=='2' || detailList.refundState=='30' && detailList.refundType=='2'">请及时联系买家协商退款事宜。</div>
      <div class="d" v-if="detailList.refundState=='40' ">您已填写收回地址，请耐心等待买家寄回。</div>
    <!-- 物流详情 -->
    <div class="c" v-if="detailList.refundState=='50' ">
      <div class="d" >
        <div style="margin-bottom:10px;">发货物流：{{detailList.expressName}}
          <span v-if="detailList.expressSn=='' || detailList.expressSn==null">无需寄件</span>
          <span v-else>{{detailList.expressName}}（{{detailList.expressSn}}）</span>
        </div>
        <div style="margin-bottom:10px;color:#999999;">
          <span>{{expressInfo.context}}</span>
        </div>
      </div>
    </div>

    <div class="main" v-if="detailList.refundState=='60'">
    <div class="header">
      <div class="one">{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}<span style="font-size:12px">元</span> 
      <span @click="tobuyMoney"><img src="../../../../static/img/right.png" alt="" style="width:10px;height:15px;margin-left:15px;"/></span>
      </div>
      <div class="tip" style="margin-left:25%">钱款已退回买家账户</div>
    </div>  
  </div> 

      <!-- 请处理退款申请 -->
      <div  v-if="detailList.ordersState=='2' && detailList.refundState=='10' && detailList.refundType=='1' || detailList.ordersState=='2' && detailList.refundState=='30' && detailList.refundType=='1'">
        <div class="tip"><span class="dot">•</span><span>如未发货，请点击同意退款给买家。</span></div>
        <div class="tip"><span class="dot">•</span><span>如实际已发货，请主动与买家联系，确认后去订单上操作发货。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果您拒逾期未处理，系统将自动退款给买家。</span></div>
      </div>
      <!-- 请处理退款申请1 -->
      <div v-if="detailList.adminState=='0' && detailList.ordersState=='3' && detailList.refundState=='10' && detailList.refundType=='1' || detailList.ordersState=='3' && detailList.refundState=='30' && detailList.refundType=='1'">
        <div class="tip"><span class="dot">•</span><span>如果您同意，将直接退款给买家。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果您拒绝，买家可以申请客服介入或重新提交申请。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果您拒逾期未处理，系统将自动退款给买家。</span></div>
      </div>
      <!-- 请处理退货退款申请 -->
      <div v-if="detailList.adminState=='0' && detailList.ordersState=='3' && detailList.refundState=='10' && detailList.refundType=='2' || detailList.ordersState=='3' && detailList.refundState=='30' && detailList.refundType=='2'">
        <div class="tip"><span class="dot">•</span><span>如果您同意，将为买家提供寄回地址。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果您拒绝，买家可以申请客服介入或重新提交申请。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果您拒逾期未处理，系统将自动退款给买家。</span></div>
      </div>
      <!-- 填写地址 -->
      <div v-if="detailList.refundState=='40'">
        <div class="tip"><span class="dot">•</span><span>如果您没有收到寄回商品，可直接拒接申请。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果您拒绝，买家可以申请客服介入或重新提交申请。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果卖家逾期未填写物流单号，将自动关闭本次申请。</span></div>
      </div>
       <!-- 买家已发回物品 -->
      <div v-if="detailList.refundState=='50'">
        <div class="tip"><span class="dot">•</span> <span>如果您未收到寄回商品，可以联系客服介入或拒绝申请。</span></div>
      </div>
      <!-- 卖家拒绝仅退款 -->
      <div v-if="detailList.refundState=='20' && detailList.refundType=='1'">
        <div class="tip"><span class="dot">•</span><span>如果买家修改退款申请后，需要您重新处理。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果买家超时未处理，退款申请将自动关闭。</span></div>
      </div>
      <!-- 卖家拒绝退货退款 -->
      <div v-if="detailList.refundState=='20' && detailList.refundType=='2'">
        <div class="tip"><span class="dot">•</span><span>如果买家修改退货申请后，需要您重新处理。</span></div>
        <div class="tip"><span class="dot">•</span><span>如果买家超时未处理，退货申请将自动关闭。</span></div>
      </div>

      
      <div style="float:right;font-size: 13px;margin-top:15px;">
        <span class="btn" @click="customer1" v-if="timeList.flag==false && detailList.refundState=='50'">客服介入</span>
        <span class="btn" @click="customer" v-if="timeList.flag && detailList.refundState!='60' && detailList.refundState!='50'">客服介入</span>
        <!-- <span class="btn" @click="toRefuse" v-if="detailList.ordersState!='2' && detailList.refundState!='60' && detailList.refundState!='20' ">拒绝申请</span> -->
        <span class="btn" @click="toRefuse" v-if="detailList.ordersState!='2' && detailList.refundState!='60' && detailList.refundState!='20' && detailList.refundState!='50' || detailList.refundState=='50' && this.isButton">拒绝申请</span>
        <span class="btn" @click="toRefuseBtn" v-if="detailList.refundState=='50' & !this.isButton">拒绝申请</span>
        <span class="btn1" @click="agreeRefund" v-if="detailList.refundState=='10' && detailList.refundType=='1' || detailList.refundState=='30' && detailList.refundType=='1' || detailList.refundState=='40' || detailList.refundState=='20' && detailList.refundType=='1'" >同意退款</span>
        <span class="btn" @click="toReturn" v-if="detailList.ordersState=='3' && detailList.refundState=='10' && detailList.refundType=='2' || detailList.ordersState=='3' && detailList.refundState=='30' && detailList.refundType=='2'|| detailList.ordersState=='2' && detailList.refundState=='10' && detailList.refundType=='2'  || detailList.ordersState=='2' && detailList.refundState=='30' && detailList.refundType=='2' || detailList.refundState=='20' && detailList.refundType=='2'">同意退货</span>
        <span class="btn1" @click="agreeOK" v-if="detailList.refundState=='50' ">确认签收</span>
      </div>
  </div> 
</div>
         
  
    
    <!-- 客服介入 -->
    <van-overlay :show="show1" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="text">亲，建议你与卖家确认是否发货，或联系快递确认物流信息。如果您的问题仍没有得到解决，您可以在申请退款的3天以后，且卖家拒绝协议后要集市介入处理。</div>
		    <div class="but">
			    <div class="btn4" @click="toOK">确认</div>
		    </div>
        </div>
      </div>
    </van-overlay>
    <!-- 客服介入 -->
    <van-overlay :show="show3" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="text">亲，卖家需要一定的时间处理您的申请，如果卖家未能解决您的问题，您可以在卖家拒绝协议后要求集市介入处理。</div>
		    <div class="but">
			    <div class="btn4" @click="toOK1">确认</div>
		    </div>
        </div>
      </div>
    </van-overlay>
    <!-- 客服介入 -->
    <van-overlay :show="show4" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="text">亲，暂时无法要求集市介入。在买家申请售后七天后且您拒绝过退货申请后可以申请介入。在此期间建议您与买家积极协商解决。</div>
		    <div class="but">
			    <div class="btn4" @click="toOK2">确认</div>
		    </div>
        </div>
      </div>
    </van-overlay>
    <!-- 确认收货 -->
    <van-overlay :show="show2" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div style="font-size:14px;font-weight:bold;color:#333333;text-align:center;margin-top:20px;">是否确认收货?</div>
          <div class="text" style="margin-top:10px;text-align:center;">确认收货后，钱款将直接退回买家账户。</div>
		    <div class="but">
			    <div class="btn2" @click="cancle">取消</div>
          <div class="btn3" @click="agreeConfirm">确认</div>
		    </div>
        </div>
      </div>
    </van-overlay>
    <!-- 撤销申请 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="text">您将撤销本次申请，如果问题未解决，您还可以再次发起。确定继续吗?</div>
		  <div class="but">
			  <div class="btn2" @click="cancle">取消</div>
			  <div class="btn3" @click="confirm">确认</div>
		  </div>
        </div>
      </div>
    </van-overlay>

    <!-- 拒绝申请 -->
    <van-overlay :show="show5" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div style="text-align:center;font-size:15px;font-weight:bold;margin-top:15px;">操作提醒</div>
          <div class="text" style="margin-top:10px;">如有问题，您可以待买家退货24小时之后再拒绝。</div>
		  <div class="but">
			  <div class="btn4" @click="cancle">确认</div>
		  </div>
        </div>
      </div>
    </van-overlay>

    

  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
      showbtn:false,
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4:false,
      show5:false,
      isButton:false,
      time: 72 * 60 * 60 * 1000,
      userId:'',
      refundId:'',
      ordersId:'',
      refundState:'',//退款状态
      adminState:'',//退款类型
      refundType:'',//退款类型
      expressName:'',//快递名称
      expressCode: "",//调取物流
      expressSn:'',
      expressInfo:{},//物流列表
      goodsState:'',
      detailList:[],
      detailInfo:{},
      expressDetail:[],
      timeList:[],
      addTime:'',
      addressSite:'',
      goodsId:'',//商品
		  nickName:'',//昵称
		  buyerId:'',//买家
      sellerId:'',//卖家
      goodsCoverUrl:'',//商品图片
      avatar:'',//买家头像
      savatar:'',//卖家头像
      url2: this.$api+'/marketorderservice/api/v1/market/orders/getOrdersExpressInfo',//物流
      url3: this.$api+'/marketorderservice/api/v1/market/orders', //获取钱款明细
      url4: this.$api+'/marketorderservice/api/v1/market/refund/updateSellerRecieveRefund',//收到货并退款
      url5: this.$api+'/marketorderservice/api/v1/market/updateReceiptOrders',
      url6: this.$api+'/marketorderservice/api/v1/market/refund/finish',//同意仅退款
      url7: this.$api+"/marketorderservice/api/v1/market/kuaidi100/searchInfo", // 获取物流详情
      url8: this.$api+'/marketorderservice/api/v1/market/refund/updateAgreeRefundByRefundId',//同意退货不退款
    };
  },
  methods: {
    //初始化获取信息
    getInfo() {
      let that = this;
      let url = this.$api+'/marketorderservice/api/v1/market/refund/log/list';
      let params = {
        refundId: this.refundId,
        userId: this.userId
      };
      this.$Axios.Post(url, params).then(function(res) {
        if(res.data.refundRVo.refund){
          that.detailList = res.data.refundRVo.refund;
          that.adminState = res.data.refundRVo.refund.adminState;
          that.refundType = res.data.refundRVo.refund.refundType;
          that.timeList = res.data.refundRVo;
          that.addTime = res.data.refundRVo.addTime;
          if(Number(that.addTime)<8640){
            that.isButton=true;
          }else{
            that.isButton=false;
          }
          that.expressCode = res.data.refundRVo.refund.expressCode;
          that.expressSn = res.data.refundRVo.refund.expressSn;
          that.getExpressdetail();
        }
      });
    },
    //获取物流
    // getExpress() {
    //   let that = this;
    //   this.$Axios2.Get(this.url2 + "/" + this.ordersId + "/" + this.userId).then(function(res) {
    //       that.expressDetail = res.data.ordersExpressInfo;
    //       if(res.data.ordersExpressInfo !=null){
    //         that.addressSite = res.data.ordersExpressInfo.addressSite;
    //       }else{
    //         that.addressSite=""
    //       } 
    //     });
    // },
    //获取物流详情
    getExpressdetail() {
      let that = this;
      let params = {       
        // code: "yuantong",//快递公司编码圆通快递
        // num: "YT4633742031055",//单号
        code: that.expressCode,//快递公司编码
        num: that.expressSn,//单号
      };
      this.$Axios.Post(this.url7, params).then(function(res) {
        if(res.data){
          that.expressInfo = res.data[0];
        }
        });
    },
    //获取钱款明细
    getData() {
      let that = this;
      this.$Axios.Get(this.url3 + "/" + this.ordersId + "/" + this.userId).then(function(res) {
          that.detailInfo = res.data.orders;
          that.goodsId = res.data.orders.goodsId;
          that.nickName = res.data.orders.nickName;
		      that.buyerId = res.data.orders.userId;
          that.sellerId = res.data.orders.suserId;
          that.goodsCoverUrl = res.data.orders.goodsImage;
          that.avatar = res.data.orders.avatar;//买家头像
          that.savatar = res.data.orders.savatar;//买家头像
        });
    },
    //同意退款
    agreeRefund(){
      // this.$toast("进入同意退款按钮")
      let that = this;
      let params = {
        refundId: this.refundId,
        userId: this.userId
      };
      this.$Axios2.Post(this.url6, params).then(function(res) {
        if(res.data.flag){
          that.$toast("同意退款成功！")
          // let arg='[{"userId":"'+that.userId+'"},{"ordersId":"'+that.ordersId+'"},{"refundId":"'+that.refundId+'"}]'
          // that.link("/market/orders/sellrefundDetail",arg)
          that.closeWinToIm(that.nickName,that.goodsId,that.sellerId,that.buyerId,that.goodsCoverUrl,that.avatar,that.ordersId)
        }else{
          that.$toast(res.messageList[0].message)
        }
      });
    },
    //同意退货不退款
    agreeReturn(){
      this.$toast("进入同意退货按钮")
      // let that = this;
      // let params = {
      //   refundId: this.refundId,
      // };
      // this.$Axios2.Post(this.url8, params).then(function(res) {
      //   if(res.data.flag){
      //     that.$toast("同意退货成功！")
      //     let arg='[{"userId":"'+that.userId+'"},{"ordersId":"'+that.ordersId+'"},{"refundId":"'+that.refundId+'"}]'
      //     that.link("/market/orders/sellrefundDetail",arg)
      //   }else{
      //     that.$toast(res.messageList[0].message)
      //   }
      // });
    },
    //确认签收
    agreeOK(){
      this.show2 = true;
    },
    agreeConfirm(){
      let that = this;
      let params = {
        refundId: this.refundId,
      };
      this.$Axios2.Post(this.url4, params).then(function(res) {
        if(res.data){
          if(res.data.flag){
             that.$toast("确认签收成功！")
             that.show2=false;
             that.getData();
             that.getInfo();
          }
        }else{
          that.$toast(res.messageList[0].message)  
        }
      });
    },
    tobuyMoney(){
      let arg='[{"userId":"'+this.userId+'"},{"ordersId":"'+this.ordersId+'"}]' 
	   	this.link('/market/orders/refundMoney',arg)
    },
    tosellMoney(){
      let arg='[{"userId":"'+this.userId+'"},{"ordersId":"'+this.ordersId+'"}]' 
	   	this.link('/market/orders/moneys',arg)
    },
    revoke() {
      this.show = true;
    },
    customer(){
      let arg='[{"userId":"'+this.userId+'"},{"refundId":"'+this.refundId+'"}]'
      this.link("/market/intervention/detail2",arg)
    },
    customer1(){
      this.show4=true;
    },
    toOK2(){
      this.show4=false;
    },
    cancle(){
      this.show = false;
      this.show1 = false;
      this.show2 = false;
      this.show5 = false;
    },
    toReturn(){
      let arg='[{"ordersId":"'+this.ordersId+'"},{"refundId":"'+this.refundId+'"}]'
      let url = this.concatUrl('/market/orders/address',arg)
      this.goNewWin(url);
    },
    toRefuse(){
      let arg='[{"ordersId":"'+this.ordersId+'"},{"refundId":"'+this.refundId+'"}]'
      let url = this.concatUrl('/market/orders/refuse',arg)
      this.goNewWin(url);
    },
    toRefuseBtn(){
      this.show5 = true;
    },
    toInfo(){
      let arg='[{"userId":"'+this.userId+'"},{"ordersId":"'+this.ordersId+'"},{"refundId":"'+this.refundId+'"}]'
      this.link('/market/orders/information',arg)
    },
    finish(){
      this.showbtn=true;
    },
    toOK(){
      let arg='[{"refundId":"'+this.refundId+'"}]'
      let url = this.concatUrl('/market/intervention/detail2',arg)
      this.goNewWin(url);
      this.show1=false;
    },
    toOK1(){
      let arg='[{"refundId":"'+this.refundId+'"}]'
      let url = this.concatUrl('/market/intervention/front',arg)
      this.goNewWin(url);
      this.show3=false;
    },
    confirm(){
      let that = this;
      let url =  this.$api+'/marketorderservice/api/v1/market/refund/close/update';
      let params = {
        refundId: this.refundId,
        userId: this.userId
      };
      this.$Axios.Post(url, params).then(function(res) {
        if(res.data){
          if(res.data.flag==true){
            that.show=false
            that.$toast("撤销申请成功")
            let arg='[{"userId":"'+that.userId+'"},{"ordersId":"'+that.ordersId+'"},{"refundId":"'+that.refundId+'"}]' 
            that.link('/market/orders/details',arg)
          }
        }else{
          that.$toast(res.messageList[0].message)
          that.show=false;
        }  
      });
    },
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.refundId = this.$router.currentRoute.query.refundId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.getInfo();
    this.getData();
    // this.getExpressdetail();
  }
};
</script>

<style lang="scss" scoped="">
.a {
  padding: 30px 20px;
  background-color: #ffd630;
}
.a1{
  padding: 30px 20px;
  background-color: #ffd630;
}
.b {
  font-size: 14px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  padding: 5px;
  display:flex;
}
.c {
  width: 100%;
}
.d {
  width: 90%;
  border-bottom: 1px solid #e5e5e5;
  margin: 0 auto;
  padding: 15px 0 15px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  text-align: left;
}
.tip {
  color: #999999;
  font-size: 12px;
  padding: 15px 0 0 15px;
  display: flex;
}
.dot {
  margin-right: 8px;
  font-size: 14px;
}
.button {
  font-size: 13px;
  float:right;
  display: flex;
  padding: 20px 15px 10px 0;
}
.button1 {
  font-size: 13px;
  padding: 20px 0 10px 50%;
}
.button2 {
  font-size: 13px;
  float:right;
  padding: 20px 0 10px 72%;
}
.button3{
  font-size: 13px;
  float:right;
  padding: 20px 0 10px 5%;
}
.btn {
  border: 1px solid #999999;
  border-radius: 25px;
  padding: 5px 10px;
  margin-right: 10px;
}
.btn1 {
  border: 1px solid #ffd630;
  border-radius: 25px;
  padding: 5px 10px;
  margin-right: 10px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 80%;
  background-color: #fff;
  border-radius: 5px;
}
.text {
  font-size: 12px;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  line-height: 24px;
  margin: 40px 20px 20px 25px;
}
.but{
  position: relative;
  bottom: 0;
  display: flex;
  text-align: center;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
}
.btn2{
  width: 50%;
  border-color: 1px solid #E5E5E5;
}
.btn3{
  width: 50%;
  background-color: #FFD630;
}
.btn4{
  width: 100%;
  background-color: #FFD630;
}
.main {
  width: 100%;
  background-color: #f8f8f8;
  .header {
    background-color: #ffffff;
    text-align: center;
    padding: 30px 20px 0 20px;
    .one { 
      color:#F22613;
      font-size: 24px;
    }
    .tip{
      color:#999999;
      font-size: 12px;
      margin-top:10px;
      margin-left:30px;
      text-align: center;
    }
  }
}
</style>